<template>
  <el-row>
    <el-col :span="24">
      <el-table :header-cell-style="{background:'#f5f5f5'}"
                class="account-list-table"
                :data="tableData"
                border>
        <el-table-column label='序号'
                         align='center'
                         type="index"
                         width="60px"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='user_no'
                         label='用户名'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='user_name'
                         label='用户昵称'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='dept_name'
                         label='部门'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='job_name'
                         label='岗位'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='phone'
                         label='手机号'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='create_time'
                         label='申请时间'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='dept_type'
                         label='组织类型'
                         align='center'
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <p>{{scope.row.dept_id == "0" ? "单位" : "部门"}}</p>
          </template>
        </el-table-column>
        <el-table-column prop='status'
                         label='状态'
                         align='center'
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.status==2">审核中</span>
            <span v-else-if="scope.row.status==4">驳回</span>
            <span v-else-if="scope.row.status==3">同意</span>
          </template>
        </el-table-column>
        <el-table-column label='操作'
                         width="200"
                         align='center'
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="text"
                       :disabled="scope.row.status==3?true:scope.row.status==4?true:false"
                       @click="onAgreeOrFail(scope.row,3)">同意</el-button>
            <el-button type="text"
                       :disabled="scope.row.status==3?true:scope.row.status==4?true:false"
                       @click="onAgreeOrFail(scope.row,4)">驳回</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="24"
            class="bottom-style">
      <el-button @click="onBack">返回</el-button>
    </el-col>
  </el-row>
</template>

<script>
import { accountApi } from '@/services/CompanySetting'
export default {
  props: {
    judgeOpen: Number,
    callBack: Function
  },
  data () {
    return {
      tableData: []
    }
  },
  methods: {
    //返回
    onBack () {
      this.callBack()
    },
    //同意/驳回
    onAgreeOrFail (row, typeVal) {
      this.$confirm(typeVal == 3 ? '确定"同意"该操作?' : '确定"驳回"该操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        left: true
      }).then(() => {
        accountApi.judgePassOrFail({
          data: {
            comp_user_id: row.comp_user_id,
            examine: typeVal
          }
        }).then((res) => {
          if (res.code == 0) {
            this.$message.success('操作成功');
            this.getUserList();
          }
        }).catch((error) => {
          console.log(error)
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });

    },
    getUserList () {
      accountApi.getUserList({
        params: {
          // company_id: this.$store.state.switchCompId,
          is_page: 0
        }
      }).then((res) => {
        this.tableData = res.data.list;
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  watch: {
    judgeOpen (n, o) {
      if (n == 1) {
        this.getUserList()
      }
      console.log('w-judgeOpen=', this.judgeOpen)
    }
  },
  created () {
    if (this.judgeOpen == 1) {
      this.getUserList()
    }
    console.log('c-judgeOpen=', this.judgeOpen)
  }
}
</script>

<style lang="scss" scoped>
.bottom-style {
  margin-top: 20px;
  text-align: right;
}
</style>